<template>
    <el-container style="height:100%;border: none;">
      <el-main style="padding:0;border: none;overflow: auto;">
        <el-tabs
          class="diytabs"
          v-model="orderTabs_active"
          type="border-card"
          closable
          style="background-color: #fff;"
          @tab-change="tabChange"
          @tab-remove="tabRemove"
        >
          <el-tab-pane
            v-for="item in orderTabs"
            :key="item.name"
            :label="item.title"
            :name="item.name"
          >
            <el-main :style="'padding:0 10px 10px 10px;border: none;height:'+(store.state.tab_panel_height - 10)+'px;'" v-show="(item.name==orderTabs_active)">
              <component :is="item.componentUrl"></component>
            </el-main>
          </el-tab-pane>
        </el-tabs>
      </el-main>
    </el-container>
  </template>
  
  <script setup>
    import { ref, onMounted, inject, nextTick } from 'vue'
    import { useStore } from 'vuex'
    
    import OrderIndex from '@/views/admin/a_order/index.vue'
    import Programme from '@/views/admin/b_programme/index.vue'
    import BuyPlan from '@/views/admin/c_buyplan/index.vue'
    import BuyMission from '@/views/admin/d_buymission/index.vue'
    import CutPlan from '@/views/admin/e_cutplan/index.vue'
    import CutMission from '@/views/admin/f_cutmission/index.vue'
  
    const $utils = inject('$utils')
    const store = useStore()
  
    const orderTabs = ref([])
    const orderTabs_active = ref('order_index')
  
    orderTabs.value = [
      {
        name: 'order_index',
        title: '订单列表',
        componentUrl: OrderIndex
      },
      {
        name: 'programme',
        title: '配比方案',
        componentUrl: Programme
      },
      {
        name: 'buyplan',
        title: '计划采购',
        componentUrl: BuyPlan
      },
      {
        name: 'buymission',
        title: '采购任务单',
        componentUrl: BuyMission
      },
      {
        name: 'cutplan',
        title: '裁剪方案',
        componentUrl: CutPlan
      },
      {
        name: 'cutmission',
        title: '裁剪任务单',
        componentUrl: CutMission
      }
    ]
  
    // ====================================================================================
  
    // Tab页转换操作 
    function tabChange(val) {
      
    }
    // Tab页删除操作
    function tabRemove(val) {
  
    }
  
  
  
  </script>
  
  <style scoped>
  .diytabs >>> .el-tabs__content{
    padding: 10px 0 0 0 !important;
  }
  </style>